<template>
	<view class="seckill">
		<view class="seckillTop">
			<view style="padding-left:15rpx">天天秒杀</view>
			<view class="seckillMore">更多</view>
		</view>
		<swiper class="swiperLR" :indicator-dots="false"  display-multiple-items="3" circular="true" next-margin="20rpx" >
			<swiper-item class="swiper_go" v-for="item in seckills" :key="index">
				<view class="seckillSlide" :style="item.style">
					<image :src="item.img"></image>
					<view class="seckillText">
						<view>{{item.text}}</view>
						<view class="seckillBtn">
							<button>{{item.title}}</button>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:'seckills_child',
		props:['seckills'],
		data(){
			return{
				
			}
		}
	}
</script>

<style>
.seckill{width:95%;margin:0 2.5%;border-radius: 20rpx;background-color:#fff;box-shadow: 1rpx 2rpx 10rpx #ccc;padding-bottom:20rpx}
.seckillTop{font-size:36rpx;color:rgba(37,37,37,1);font-weight:500;display: flex;justify-content: space-between;padding:20rpx 10rpx}
.seckillMore{color:rgba(180,180,180,1);font-weight:normal;font-size:26rpx;padding-right:31rpx}
.seckillSlide{width:180rpx;height:195rpx;border-radius:10rpx}
.seckillSlide image{width:80%;height:60%;padding-left:12rpx}
.seckillText{font-size:20rpx;color:#fff;padding:0 5rpx 10rpx;margin-top:15rpx}
.seckillText,.seckillText button{display:flex;justify-content: space-around;align-items: center;}
.seckillText button{width:100rpx;height:40rpx;font-size:20rpx;color:#fff;background:rgba(255,255,255,0.2);opacity:0.8;border-radius:10rpx;text-align:center;padding:2rpx 0}
.swiperLR{width: 98%;height:200rpx;position:relative;margin:0 auto}
.swiper_go{height:200rpx ;}
</style>
